// 1. shoudComponenUpdate React.memo
// 2. key
// 3. null
// 4. avoid rerender { inline-style/arrowFunction/List.map/expensive calculation caching}
// 5. shallowEqual => immutable.js / reselect
// 6. tools: Profiler / why-did-you-render
// 7. others: virtual list/ Web worker/ React.lazy
import React, { useState, Profiler, useCallback } from "react";
import { NoPure, Pure } from "./Pure";
import KeyDiff from "./Key";
import Null from "./Null";
import Rerender from "./Rerender";
import NoRerender from "./NoRerender";
import Equal from "./Equal";

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  // Aggregate or log render timings...
  console.info({
    phase,
    actualDuration,
  });
}
const PerMain = () => {
  const [isSelect, setSelect] = useState(false);
  const onClick = useCallback(() => {
    setSelect((s) => !s);
  }, []);
  return (
    <Profiler id="main" onRender={onRenderCallback}>
      <div className="per__main">
        <button onClick={onClick}>perMain : click</button>
        {/* <NoPure isSelect={isSelect} /> */}
        {/* <Pure isSelect={isSelect} /> */}
        {/* <KeyDiff /> */}
        {/* <Null isSelect={isSelect} /> */}
        {/* <Rerender /> */}
        {/* <NoRerender /> */}
        <Equal />
      </div>
    </Profiler>
  );
};
// PerMain.whyDidYouRender = true;
export default PerMain;
